<template>
  <div>
    <div class="divForm">
      <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item
              label="货主编号"
              prop="code"
            >
              <el-input
                v-model="formData.code"
                placeholder="请输入"
                clearable
                disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="货主名称"
              prop="name"
            >
              <el-input
                v-model="formData.name"
                maxlength="10"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系人"
              prop="personName"
            >
              <el-input
                v-model="formData.personName"
                maxlength="10"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系人电话"
              prop="phone"
            >
              <el-input
                v-model="formData.phone"
                placeholder="请输入"
                maxlength="50"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">

          <el-col :span="6">
            <el-form-item label="联系人邮箱">
              <el-input
                v-model="formData.email"
                placeholder="请输入"
                clearable
                @change="handleBlur"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="省/市/区"
              prop="location"
            >
              <el-cascader
                v-model="formData.location"
                :options="locationOptions"
                :props="{ expandTrigger: 'hover' }"
                clearable
                style="width: 100%"
                multiple:
                true
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="详细地址"
              prop="address"
            >
              <el-input
                v-model="formData.address"
                maxlength="50"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                resize="none"
                v-model="formData.remark"
                placeholder="请输入"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { ElForm } from 'element-ui/types/form'

import { validatePhone, validateEMail } from '@/utils/validate'
// 关闭窗口
import SinglePage from '@/mixin/single-page'
// 公用组件
// 按钮
import BaseButton from '@/components/base-button/index.vue'
// 基本数据
import { getChinaCascaderData } from '@/utils/common-select-data'
// interface接口
import { ICascaderEntity } from '@/utils/common-interface'
// api数据接口

@Component({
  name: 'baseInfoAdd',
  components: {
    BaseButton
  }
})
export default class extends mixins(SinglePage) {
  @Prop() private formData: any
  private ref: any = this.$refs
  private texNum = 0
  private locationOptions: ICascaderEntity[] = []
  // 校验表单
  private rules = {
    code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
    name: [{ required: true, message: '请输入货主名称', trigger: 'blur' }],
    personName: [
      { required: true, message: '请输入联系人姓名', trigger: 'blur' }
    ],
    phone: [
      {
        required: true,
        message: '请输入联系人手机号',
        validator: validatePhone,
        trigger: 'blur'
      }
    ],
    location: [{ required: true, message: '请选择区域', trigger: 'change' }]
  }

  mounted() {
    this.initData()
  }

  // 功能
  // 获取select数据
  initData() {
    this.locationOptions = getChinaCascaderData()
  }

  // 提交数据
  private handleSave() {
    (this.$refs.ruleForm as ElForm).validate(async(valid: boolean) => {
      if (valid) {
        const activeStep = 1
        this.$emit('getvalue', activeStep)
      } else {
        return false
      }
    })
  }

  // ui
  // 返回
  btnReturn() {
    // this.closeWindow()
  }

  handleBlur(val: any) {
    if (!validateEMail(val)) {
      this.formData.email = ''
      this.$message.error('请输入正确的邮箱')
      return false
    }
  }

  // 字数限制
  descInput() {
    var txtVal = (this.formData as any).remark.length
    this.texNum = 0 + txtVal
  }
}
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
</style>
